<template>
<div>
  <div class="title">
    <div class="logo"><img src="../assets/img/logo.png" alt=""></div>
    <div class="search">
      <input type="text"><div><van-icon name="search" /><span>搜索</span></div>
    </div>
    <div class="shopping" v-if="!$store.state.isLogin" >
      <a type="primary" @click="showLog" style="background:#fff;outline: none;border: none">
        <van-icon name="shopping-cart-o" size="20"/>
        <span style="color: #aaa">登录/注册</span>
        <a-icon type="user"/>
      </a>
    </div>
    <div class="shopping" v-else>
      <router-link to="/shopping"><van-icon name="shopping-cart-o" size="20"/></router-link>
      <a-dropdown >

        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          <span> {{ $store.state.userContent.nickname}}</span>
          <img class="logo" :src="$store.state.userContent.avatarUrl" alt="">
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">个人中心</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">我的课程</a>
          </a-menu-item>
          <a-menu-item>
            <a href="./shopCar">我的订单</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;" @click="logOut"><router-link to="/">退出登录</router-link></a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>

    </div>
    <view1></view1>
  </div>
  <div></div>

  <div class="nav">
    <ul>
      <li>首页</li>
      <li><a-dropdown class="list">
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          课程分类 <a-icon type="down" />
        </a>
        <a-menu slot="overlay">
          <a-menu-item><a href="javascript:;">学长面对面</a></a-menu-item>
          <a-menu-item><a href="javascript:;">职业素养必修课</a></a-menu-item>
          <a-menu-item><a href="javascript:;">大数据</a></a-menu-item>
          <a-menu-item><a href="javascript:;">WEB前端</a></a-menu-item>
          <a-menu-item><a href="javascript:;">数据库</a></a-menu-item>
          <a-menu-item><a href="javascript:;">网络爬虫</a></a-menu-item>
          <a-menu-item><a href="javascript:;">求职技巧</a></a-menu-item>
          <a-menu-item><a href="javascript:;">项目实战</a></a-menu-item>
        </a-menu>
      </a-dropdown></li>
      <li>专属课程</li>
    </ul>
  </div>
</div>
</template>

<script>
import view1 from "@/components/view";
export default {
name: "title",
  data() {
    return {
      // visible: false,
    };
  },
  methods: {
    showLog(){
      this.$store.commit("changeMT", true)
    },
    logOut(){
      this.$message.success('退出成功');
      this.$store.dispatch("logout")
    }
  },
  components:{
    view1
  }
}
</script>

<style scoped lang="less">
.title{
  width: 1200px;
  margin: auto;
  height: 75px;
  display: flex;
  justify-content: space-between;
  line-height: 75px;
  padding: 0 30px;
  //margin-top: 20px;
  .logo{
    width: 147px;
    height: 100%;
    img{
      height: 60%;
    }
  }
  .search{
    height: 38px;
    width: 400px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    margin-left: -100px;
    line-height: 40px;
    //justify-content: center;
    input {
      //height: 30px;
      margin-left: 20px;
      border: none;
      outline: none;
    }
    div{
      height: 38px;
      display: flex;
      padding: 10px;
      line-height: 20px;
      background: #42b983;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      margin-right: -46px;

      i{
        font-size: 20px;
        margin-right: 10px;
      }
      span{
        font-size: 16px;
      }
    }

  }
  .shopping {
    margin-left: 50px;
    cursor: pointer;
    i:nth-of-type(1) {
      font-size: 20px;
      color: gray;
    }
    i:nth-of-type(2) {
      background-color: #c1c1c1;
      padding: 8px;
      border-radius: 50%;
      margin-left: 5px;
    }
  }
}
.nav {
  ul{
    overflow: hidden;
    list-style: none;
    width: 80%;
    margin: auto;
    li{
      float: left;
      color: #666;
      margin-right: 20px;
      font-size: 16px;
      a {
        color: #666;
      }
    }
  }
}
/deep/.logo {
  width: 16%;
}
</style>